<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>浙江在线预约诊疗服务平台</title>
  <link rel="stylesheet" href="public/css/lib/bootstrap.min.css" tppabs="https://guahao.zjol.com.cn/public/css/lib/bootstrap.min.css">
  <link rel="stylesheet" href="public/css/lib/glider.min.css" tppabs="https://guahao.zjol.com.cn/public/css/lib/glider.min.css">
  <link rel="stylesheet" href="public/css/lib/bootstrap-datepicker.min.css" tppabs="https://guahao.zjol.com.cn/public/css/lib/bootstrap-datepicker.min.css">
  <link rel="stylesheet" href="public/css/lib/jquery-confirm.min.css" tppabs="https://guahao.zjol.com.cn/public/css/lib/jquery-confirm.min.css">
  <link rel="stylesheet" href="../at.alicdn.com/t/font_1205629_qkvn3s9pbk.css" tppabs="https://at.alicdn.com/t/font_1205629_qkvn3s9pbk.css">
  <link rel="stylesheet" href="public/css/global.css" tppabs="https://guahao.zjol.com.cn/public/css/global.css">
  <link rel="stylesheet" href="public/css/doctor.css" tppabs="https://guahao.zjol.com.cn/public/css/doctor.css">
 <link rel="stylesheet" type="text/css" href="public/css/all.css" />
  <link rel="stylesheet" type="text/css" href="public/css/pages-getOrderInfo.css" />
</head>
<body>
<div id="app">
    <div class="topbar">
  <div class="topbar-container row">
	  <div class="col-6 topbar-user-info" id="getToken">

		  <span>欢迎您！ </span>
		  <a v-if="token != null" href='user_info.html' tppabs='https://guahao.zjol.com.cn/login'>用户中心</a>
		  <a v-if="token == null" href='login.html' tppabs='https://guahao.zjol.com.cn/login'>请登录</a>
		  <a v-if="token == null" href='register.html' tppabs='https://guahao.zjol.com.cn/register'>免费注册</a>


	  </div>
  </div>
</div>
<!-- 顶部搜索栏 -->
<div class="topbar-header-borer-box">
  <div class="topbar-header-container">
    <div class="topbar-header">
      <a class="topbar-logo float-left" href="home.html" tppabs="https://guahao.zjol.com.cn/home" style="width: 300px;height: 40px; display: block;"></a>
      <div class="float-left" style="margin-left: 130px; width: 600px; max-width: auto;">
      </div>
    </div>
    <!-- 顶部nav栏 -->
    <div class="topbar-nav">
    </div>
  </div>
</div>

	<div class="cart py-container" >
		<!--主内容-->
		<div class="checkout py-container">
			<div class="checkout-tit">
				<h4 class="tit-txt">填写并核对预约信息</h4>
			</div>
			<div class="checkout-steps">
				<form>
					<div class="step-tit">
						日期:<input type="date" v-model="seeDoctorTime" /><br />
						医院:<input type="text" v-model="hospital" disabled /><br />
						时间：<input type="text"  v-model="dayTime"  disabled><br />
						医生名:<input type="text"  v-model="doctorName" disabled/><br />
						是否是专家号：
						<input  type='radio' name='isSpecialist'  value='1' v-model='isSpecialist' />是
						<input  type='radio' name='isSpecialist'  value='2' v-model='isSpecialist' />否
						<br />

						<input type="button" value="添加就诊人" @click="addPaitient()">
						<br />
						选择就诊人:
						<select v-model="id" @change="getPatient()" style="width: 120px;height: 34px;line-height: 32px;text-align: center;" >
							<option selected="selected">请选择</option>
							<option  v-for="(item,idx) in patient"
									 :key="idx"  value-aid="{{idx}}"  v-bind:value="item.id" >{{item.patientsName}}</option>
						</select>
						<br />
						就诊人手机号:<input type="text" v-model="patientPhone" /><br />
					</div>
			
					<div class="hr"></div>
					<div class="payshipInfo">
						<div class="step-tit">
							<h5>默认支付方式</h5>
						</div>
						<div class="step-cont">
							<ul class="payType">
								<li ><span title="xxxxx">微信支付</span></li>
							</ul>
						</div>
					<div class="hr"></div>
					<span>买家留言</span>
						<div class="step-cont">
							<ul class="send-detail">
								<li>
									<div class="sendType">
									<div class="buyMessage">
										<textarea placeholder="建议留言前先与商家沟通确认" class="remarks-cont"></textarea>
									</div>
									</div>
								</li>
							</ul>
						</div>
					</div>
						<div class="clearfix trade">
							<div class="fc-price">应付金额:　<span class="price">¥<em th:text="${totalMoney}"></em>{{price}}.00</span></div>
								</div>
								<div class="submit">
									<a class="sui-btn btn-danger btn-xlarge"   @click="addOrder">支付</a>
								</div>
					</form>
			</div>
		</div>
	</div>
	</div>
</div>
</body>
<script src="public/js/lib/jquery.js" tppabs="https://guahao.zjol.com.cn/public/js/lib/jquery.js"></script>
<script src="public/js/lib/js.cookie.min.js" tppabs="https://guahao.zjol.com.cn/public/js/lib/js.cookie.min.js"></script>
<script src="public/js/lib/popper.min.js" tppabs="https://guahao.zjol.com.cn/public/js/lib/popper.min.js"></script>
<script src="public/js/lib/bootstrap.min.js" tppabs="https://guahao.zjol.com.cn/public/js/lib/bootstrap.min.js"></script>
<script src="public/js/lib/glider.js" tppabs="https://guahao.zjol.com.cn/public/js/lib/glider.js"></script>
<script src="public/js/lib/bootstrap-datepicker.min.js" tppabs="https://guahao.zjol.com.cn/public/js/lib/bootstrap-datepicker.min.js"></script>
<script src="public/js/lib/bootstrap-datepicker.zh-CN.min.js" tppabs="https://guahao.zjol.com.cn/public/js/lib/bootstrap-datepicker.zh-CN.min.js"></script>
<script src="public/js/lib/jquery-confirm.min.js" tppabs="https://guahao.zjol.com.cn/public/js/lib/jquery-confirm.min.js"></script>
<script src="public/js/lib/md5.js" tppabs="https://guahao.zjol.com.cn/public/js/lib/md5.js"></script>
<script src="public/js/lib/crypto.js" tppabs="https://guahao.zjol.com.cn/public/js/lib/crypto.js"></script>
<script src="public/js/lib/lodash.js" tppabs="https://guahao.zjol.com.cn/public/js/lib/lodash.js"></script>
<script src="public/js/global.js" tppabs="https://guahao.zjol.com.cn/public/js/global.js"></script>
<script src="public/js/doctor.js" tppabs="https://guahao.zjol.com.cn/public/js/doctor.js"></script>
<script  src="/js/plugins/jquery/jquery.min.js"></script>
<script src="public/js/lib/vue.js"></script>
<script src="public/js/lib/axios.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>


<script>
	function getQueryString(key){
		var reg = new RegExp("(^|&)"+key+"=([^&]*)(&|$)");
		var result = window.location.search.substr(1).match(reg);
		return result?decodeURIComponent(result[2]):null;
	}


	var app = new Vue({
		el: '#app',
		data(){
			return{

				seeDoctorTime: '2021-'+getQueryString("date"),
				doctorId: getQueryString("doctorId"),
				hospital: '',
				dayTime: getQueryString("dayTime"),
				department: getQueryString("department"),
				isSpecialist: 1,
				checkedValue:'',
				list:[{value:1},{value:2}],
				userId:'' ,
				patient: {},
				patientPhone: '',
				patientName: '',
				doctorInfo: {},
				doctorName: '',
				doctorRoleId: '',
				price: '',
				hospitalId:'',
				isMorning: '',


			}

		},
		methods: {
			addPaitient(){
				//跳转到添加就诊人页面
				location.href = 'new_user.html';
			},
			getPatient(){
				//console.log(this.patientId);
				axios.get('http://localhost:8080/hospital/api/patients/getpatient?patientId='+(this.id)).then(response => {
					this.patientPhone = response.data.data.patiensPhone;
					this.patientName= response.data.data.patientsName;
					//console.log(this.patiensPhone);
				});
			},
			addOrder(){
				var that = this;
				console.log("doctorId-----------"+ this.doctorId);
				console.log("doctorId-----------"+ this.hospitalId);
				console.log("doctorId-----------"+ this.isSpecialist);
				console.log("doctorId-----------"+ this.price);
				console.log("doctorId-----------"+ that.userId);
				axios.post('http://localhost:8080/hospital/api/order/addOrder?doctorId='+this.doctorId+'&numType='+ this.isSpecialist+
						'&price='+this.price+'&userId='+this.userId,{},{headers:{'token':localStorage.getItem('token')}}
				).then(response => {
						if(response.status===200){
							var orderId=response.data.data;
							alert("orderId"+orderId)

							axios.get('http://localhost:8080/hospital/alipay/pay?WIDbody=预约费用&WIDout_trade_no='+
									orderId+'&WIDsubject='+this.patientName+'&WIDtotal_amount='+this.price+'&doctorId='+this.doctorId
									+'&isMorning='+this.isMorning+'&time='+this.seeDoctorTime).then(response => {
								console.log(response.config.url);
								if(response.status===200){
									location.href=response.config.url;
								}
							});
						}

				});
			}
		},
		mounted(){


			console.log( localStorage.getItem('token'));
			axios.get('http://localhost:8080/hospital/api/patients/getTokenPatientInfo?',{
				headers: {
					'token': localStorage.getItem('token')
				}
			}).then(response => {
				this.patient = response.data.data;
				console.log(this.patient);
			});
			axios.post('http://localhost:8080/hospital/api/doctor/selectId?id='+(this.doctorId)).then(response => {
				this.doctorInfo = response.data.data;
				this.doctorName=response.data.data.name;
				this.doctorRoleId=response.data.data.roleId;
				//console.log(this.doctorInfo)
			});
			axios.get('http://localhost:8080/hospital/api/doctor/pageDoctor?doctorId='+(this.doctorId)).then(response => {
				this.hospital=response.data.data.hospitalName;
				this.hospitalId=response.data.data.hospitalId;
				//console.log("hospitalId--------------------"+this.hospitalId)
			});
			axios.get('http://localhost:8080/hospital/api/doctor/getPrices?doctorId='+(this.doctorId)).then(response => {
				this.price=response.data.data.money;
				//console.log(this.price)
			});


			if(this.dayTime==='am'){
				this.dayTime="上午";
				this.isMorning=1;
			}else{
				this.dayTime="下午";
				this.isMorning=2;
			}





		}

	})
</script>
</html>
<script src="public/js/userPublic.js"/>

